/**
 * 自定义原子类
 * @author: 夏夜追凉丶(Sonve)
 * @description: 本人不喜使用unocss、tailwindcss等原子类库，只作定制封装常用原子类，力求最简
 */

@use 'sass:math'; // sass:math 函数库

// 外边距、内边距
@for $i from 0 through 100 {
  $value: $i * 0.1; // 计算当前的值，例如1 * 0.1=0.1, 50 * 0.1=5.0
  $integer: math.floor(math.div($i, 10)); // 计算类名中的整数部分，例如 floor(1/10)=0, floor(50/10)=5
  $decimal: $i % 10; // 计算类名中的小数部分数字，例如 1%10=1, 50%10=0
  $decimal-str: if($decimal == 0, '', '_#{$decimal}'); // 小数部分类名拼接

  // 以 px 为单位
  .margin-#{$i} {
    margin: #{$i}px !important;
  }
  .mt-#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr-#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml-#{$i} {
    margin-left: #{$i}px !important;
  }
  .mtb-#{$i} {
    margin-top: #{$i}px !important;
    margin-bottom: #{$i}px !important;
  }
  .mlr-#{$i} {
    margin-left: #{$i}px !important;
    margin-right: #{$i}px !important;
  }

  .padding-#{$i} {
    padding: #{$i}px !important;
  }
  .pt-#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr-#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl-#{$i} {
    padding-left: #{$i}px !important;
  }
  .ptb-#{$i} {
    padding-top: #{$i}px !important;
    padding-bottom: #{$i}px !important;
  }
  .plr-#{$i} {
    padding-left: #{$i}px !important;
    padding-right: #{$i}px !important;
  }

  // 以 rem 为单位
  .margin-#{$integer}#{$decimal-str}rem {
    margin: #{$value}rem !important;
  }
  .mt-#{$integer}#{$decimal-str}rem {
    margin-top: #{$value}rem !important;
  }
  .mb-#{$integer}#{$decimal-str}rem {
    margin-bottom: #{$value}rem !important;
  }
  .ml-#{$integer}#{$decimal-str}rem {
    margin-left: #{$value}rem !important;
  }
  .mr-#{$integer}#{$decimal-str}rem {
    margin-right: #{$value}rem !important;
  }
  .mtb-#{$integer}#{$decimal-str}rem {
    margin-top: #{$value}rem !important;
    margin-bottom: #{$value}rem !important;
  }
  .mlr-#{$integer}#{$decimal-str}rem {
    margin-left: #{$value}rem !important;
    margin-right: #{$value}rem !important;
  }

  .padding-#{$integer}#{$decimal-str}rem {
    padding: #{$value}rem !important;
  }
  .pt-#{$integer}#{$decimal-str}rem {
    padding-top: #{$value}rem !important;
  }
  .pl-#{$integer}#{$decimal-str}rem {
    padding-left: #{$value}rem !important;
  }
  .pr-#{$integer}#{$decimal-str}rem {
    padding-right: #{$value}rem !important;
  }
  .pb-#{$integer}#{$decimal-str}rem {
    padding-bottom: #{$value}rem !important;
  }
  .plr-#{$integer}#{$decimal-str}rem {
    padding-left: #{$value}rem !important;
    padding-right: #{$value}rem !important;
  }
  .ptb-#{$integer}#{$decimal-str}rem {
    padding-top: #{$value}rem !important;
    padding-bottom: #{$value}rem !important;
  }
}

.ml-auto {
  margin-left: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.margin-auto {
  margin: auto !important;
}

.pl-auto {
  padding-left: auto !important;
}

.pr-auto {
  padding-right: auto !important;
}

.pt-auto {
  padding-top: auto !important;
}

.pb-auto {
  padding-bottom: auto !important;
}

.padding-auto {
  padding: auto !important;
}

.ml-base {
  margin-left: var(--base-gap) !important;
}

.mr-base {
  margin-right: var(--base-gap) !important;
}

.mt-base {
  margin-top: var(--base-gap) !important;
}

.mb-base {
  margin-bottom: var(--base-gap) !important;
}

.margin-base {
  margin: var(--base-gap) !important;
}

.pl-base {
  padding-left: var(--base-gap) !important;
}

.pr-base {
  padding-right: var(--base-gap) !important;
}

.pt-base {
  padding-top: var(--base-gap) !important;
}

.pb-base {
  padding-bottom: var(--base-gap) !important;
}

.padding-base {
  padding: var(--base-gap) !important;
}

// 宽高
.w-full {
  width: 100%;
}

.w-full-v {
  width: 100vw;
}

.h-full {
  height: 100%;
}

.h-full-v {
  height: 100vh;
}

.w-h-full {
  width: 100%;
  height: 100%;
}

.w-h-full-v {
  width: 100vw;
  height: 100vh;
}

.w-auto {
  width: auto !important;
}

.h-auto {
  height: auto !important;
}

.w-h-auto {
  width: auto !important;
  height: auto !important;
}

// 宽高比 1:1
.aspect-1 {
  aspect-ratio: 1;
}

// 鼠标小手样式
.cursor-pointer {
  cursor: pointer;

  &:active {
    opacity: 0.9;
    transform: translate(0.4px, 0.4px);
  }
}

// 文字相关
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-Abc {
  text-transform: Capitalize;
}

.text-ABC {
  text-transform: Uppercase;
}

.text-abc {
  text-transform: Lowercase;
}

.text-delete-line {
  text-decoration: line-through;
}

.text-under-line {
  text-decoration: underline;
}

.text-bold {
  font-weight: bold;
}

.text-italic {
  font-style: italic;
}

.text-select-none {
  user-select: none;
}

.text-nowrap {
  white-space: nowrap;
}

.vertical-middle {
  vertical-align: middle;
}

@for $i from 1 through 60 {
  $value: $i * 0.1; // 计算当前的值，例如1 * 0.1=0.1, 50 * 0.1=5.0
  $integer: math.floor(math.div($i, 10)); // 计算类名中的整数部分，例如 floor(1/10)=0, floor(50/10)=5
  $decimal: $i % 10; // 计算类名中的小数部分数字，例如 1%10=1, 50%10=0
  $decimal-str: if($decimal == 0, '', '_#{$decimal}'); // 小数部分类名拼接

  // 以 px 为单位
  .fs-#{$i} {
    font-size: #{$i}px;
  }

  // 以 rem 为单位
  .fs-#{$integer}#{$decimal-str}rem {
    font-size: #{$value}rem;
  }
}

@for $i from 0 through 12 {
  .line-height-#{$i} {
    line-height: #{$i};
  }
}

// 字行省略限制
@for $i from 0 through 5 {
  .text-ellipsis-#{$i} {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: #{$i};
    line-clamp: #{$i};
  }
}

// flex 布局
.flex {
  display: flex !important;
  flex-direction: row !important;
}

.flex-col {
  display: flex !important;
  flex-direction: column !important;
}

.flex-vhc {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
}

.flex-hc {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
}

.flex-vc {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.flex-col-vhc {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.flex-col-hc {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.flex-col-vc {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@for $i from 0 through 1 {
  .flex-shrink-#{$i} {
    flex-shrink: #{$i} !important;
  }
}

@for $i from 0 through 24 {
  .flex-grow-#{$i} {
    flex-grow: #{$i};
  }

  .flex-#{$i} {
    flex: #{$i} 0 0%;
  }
}

@for $i from 0 through 80 {
  .gap-#{$i} {
    gap: #{$i}px;
  }
  .gap-row-#{$i} {
    row-gap: #{$i}px;
  }
  .gap-col-#{$i} {
    column-gap: #{$i}px;
  }
}

.flex-column {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.justify-evenly {
  justify-content: space-evenly !important;
}

.align-start {
  align-items: flex-start !important;
}

.align-end {
  align-items: flex-end !important;
}

.align-center {
  align-items: center !important;
}

.align-stretch {
  align-items: stretch !important;
}

.self-start {
  align-self: flex-start !important;
}

.self-center {
  align-self: center !important;
}

.self-end {
  align-self: flex-end !important;
}

.self-stretch {
  align-self: stretch !important;
}

// 其他布局
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.zindex-max {
  z-index: 999999 !important;
}

.inline-block {
  display: inline-block !important;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

// 旋转度
@for $i from 0 through 180 {
  // x 轴旋转
  .rotate-x-#{$i} {
    transform: rotateX(#{$i}deg);
  }
  // y 轴旋转
  .rotate-y-#{$i} {
    transform: rotateY(#{$i}deg);
  }
  // 旋转
  .rotate-#{$i} {
    transform: rotate(#{$i}deg);
  }
}

// 颜色
.color-primary {
  color: var(--el-color-primary) !important;
}

.color-success {
  color: var(--el-color-success) !important;
}

.color-info {
  color: var(--el-color-info) !important;
}

.color-warning {
  color: var(--el-color-warning) !important;
}

.color-danger {
  color: var(--el-color-danger) !important;
}

.color-regular {
  color: var(--el-text-color-regular) !important;
}

.color-red {
  color: #e54d42 !important;
}

.color-orange {
  color: #f37b1d !important;
}

.color-yellow {
  color: #fbbd08 !important;
}

.color-olive {
  color: #8dc63f !important;
}

.color-green {
  color: #39b54a !important;
}

.color-cyan {
  color: #1cbbb4 !important;
}

.color-blue {
  color: #0081ff !important;
}

.color-sakura {
  color: #fb7299 !important;
}

.color-sky {
  color: #66ccff !important;
}

.color-grass {
  color: #39c5bb !important;
}

.color-purple {
  color: #6739b6 !important;
}

.color-mauve {
  color: #9c26b0 !important;
}

.color-pink {
  color: #e03997 !important;
}

.color-brown {
  color: #a5673f !important;
}

.color-grey {
  color: #8799a3 !important;
}

.color-gray {
  color: #aaaaaa !important;
}

.color-dark {
  color: #333333 !important;
}

.color-black {
  color: #000000 !important;
}

.color-white {
  color: #ffffff !important;
}

.color-inherit {
  color: inherit !important;
}

.bg-red {
  background-color: #e54d42 !important;
  color: #ffffff !important;
}

.bg-orange {
  background-color: #f37b1d !important;
  color: #ffffff !important;
}

.bg-yellow {
  background-color: #fbbd08 !important;
  color: #333333 !important;
}

.bg-olive {
  background-color: #8dc63f !important;
  color: #ffffff !important;
}

.bg-green {
  background-color: #39b54a !important;
  color: #ffffff !important;
}

.bg-cyan {
  background-color: #1cbbb4 !important;
  color: #ffffff !important;
}

.bg-blue {
  background-color: #0081ff !important;
  color: #ffffff !important;
}

.bg-sky {
  background-color: #66ccff !important;
  color: #ffffff !important;
}

.bg-purple {
  background-color: #6739b6 !important;
  color: #ffffff !important;
}

.bg-mauve {
  background-color: #9c26b0 !important;
  color: #ffffff !important;
}

.bg-pink {
  background-color: #e03997 !important;
  color: #ffffff !important;
}

.bg-brown {
  background-color: #a5673f !important;
  color: #ffffff !important;
}

.bg-grey {
  background-color: #8799a3 !important;
  color: #ffffff !important;
}

.bg-gray {
  background-color: #f0f0f0 !important;
  color: #333333 !important;
}

.bg-dark {
  background-color: #333333 !important;
  color: #ffffff !important;
}

.bg-black {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.bg-white {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* 保持宽高比并填充容器，但可能会裁剪部分图片 */
.bg-img-cover {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 保持宽高比并填充容器，且不会裁剪图片，但图片可能不会完全填满容器 */
.bg-img-contain {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 填充满容器，但图片可能会变形 */
.bg-img-full {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
